<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/css/addDocs.css" />
        <script src="/lib/js/jquery.min.js"></script>
        <script src="/lib/js/marked.min.js"></script>
        <link href="/lib/css/monokai-sublime.min.css"  rel="stylesheet" />
        <link href="/lib/pnotify/pnotify.custom.min.css"  rel="stylesheet" />
        <link href="/lib/bootstrap/bootstrap.css"  rel="stylesheet" />
        <script src="/lib/pnotify/pnotify.custom.min.js"></script>
        <link href="/lib/loading/css/loading.css"  rel="stylesheet" />
        <script src="/lib/loading/js/loading.js"></script>
        <script src="/lib/js/highlight.min.js"></script>
        <script src="/js/util.js"></script>
    </head>
    <body>
        <div class="addDocsBox">
            <div class="addDocsTitle"><i class="fa fa-file-text-o fa-lg"></i>编辑接口文档<a href="/index"><span><i class="fa fa-mail-reply-all  fa-lg"></i>返回首页</span></a></div>
            <div class="addDocsContent">
                
                <div class="addDocsContentItem">
                    <div class="addDocsContentItemLeft">所属分类：</div>
                    <div class="addDocsContentItemRight">
                        <select class="docs_select" id="d_dcid">
                            <option value="0">--请选择所属分类--</option>
                            <% for(var i=0;i<categoryData.length;i++){ %>
                               <% if(categoryData[i].dc_id == apiData.apiData.d_dcid){ %>
                                <option selected value="<%- categoryData[i].dc_id %>"><%- categoryData[i].dc_name %></option>
                               <% }else{ %>
                                <option value="<%- categoryData[i].dc_id %>"><%- categoryData[i].dc_name %></option>
                               <% } %> 
                            <% } %>
                        </select>
                    </div>
                </div>
                <div class="addDocsContentItem">
                    <div class="addDocsContentItemLeft">接口名称：</div>
                    <div class="addDocsContentItemRight"><input placeholder="请输入接口名称" class="docs_input" id="d_name" value="<%- apiData.apiData.d_name %>" /></div>
                </div>
                <div class="addDocsContentItem">
                    <div class="addDocsContentItemLeft">接口地址：</div>
                    <div class="addDocsContentItemRight"><input placeholder="请输入接口地址" class="docs_input" id="d_api" value="<%- apiData.apiData.d_api %>" /></div>
                </div>
                <div class="addDocsContentItem">
                    <div class="addDocsContentItemLeft">接口描述：</div>
                    <div class="addDocsContentItemRight"><textarea id="d_desc" placeholder="请输入接口描述" class="docs_textarea"><%- apiData.apiData.d_desc %></textarea></div>
                </div>
                <div class="addDocsContentItem">
                    <div class="addDocsContentItemLeft">接口备注：</div>
                    <div class="addDocsContentItemRight"><textarea id="d_note" placeholder="请输入接口备注" class="docs_textarea"><%- apiData.apiData.d_note %></textarea></div>
                </div>
                <div class="addDocsContentItem">
                    <div class="addDocsContentItemLeft">请求方式：</div>
                    <div class="addDocsContentItemRight">
                        <input type="radio" <% if(apiData.apiData.d_method == 'GET'){ %> checked <% } %>  class="docs_radio" value="GET" name="d_method" /><span class="radio_span">GET</span>
                        <input type="radio" <% if(apiData.apiData.d_method == 'POST'){ %> checked <% } %> class="docs_radio" value="POST" name="d_method" style="margin-left:30px;" /><span class="radio_span">POST</span>
                    </div>
                </div>
                <div class="addDocsContentItem">
                        
                        <div class="addDocsContentItemLeft">请求参数：</div>
                        <div class="addDocsContentItemRight">
                            <div class="addDocsContentItemParamAction">请按照规则进行录入，每项用 | 隔开，从左往右依次为：<b>参数名称 | 请求方式 | 是否必传 | 验证规则 | 参数描述</b><br/>例如：student_name | GET | 是 | NUMBER | 学生姓名 </div>
                            <div class="addDocsContentItemParamAction"><i class="fa fa-plus-circle fa-lg add_params"></i><b class="delete_params" style="cursor:pointer;">点击删除所有参数</b></div>
                            <div class="addDocsContentItemParam">
                                <% if(apiData.params.length <= 0){ %>
                                    <div class="addDocsContentItemParamInput"><input type="text" placeholder="参数名称 | 参数类型 | 是否必传 | 验证规则 | 参数描述"  /><i class="fa fa-minus-circle fa-lg delete_params_item"></i></div>  
                                <% }else{ 
                                    for(var i=0;i<apiData.params.length;i++){ 
                                %>
                                    <div class="addDocsContentItemParamInput"><input type="text" placeholder="参数名称 | 参数类型 | 是否必传 | 验证规则 | 参数描述"  value="<%- apiData.params[i].drp_name %>|<%- apiData.params[i].drp_way %>|<%- apiData.params[i].drp_is_must %>|<%- apiData.params[i].drp_rule %>|<%- apiData.params[i].drp_note %>" /><i class="fa fa-minus-circle fa-lg delete_params_item"></i></div>
                                <% }} %>
                            </div>
                            
                        </div>
                </div>
                <div class="addDocsContentItem">
                        <div class="addDocsContentItemLeft">返回结果：</div>
                        <div class="addDocsContentItemRight">
                            <div class="addDocsContentResult">
                                <div class="addDocsContentResultInput">
                                    <textarea id="md" placeholder="请在该区域输入markdown内容"><%- apiData.apiData.d_result %></textarea>
                                </div>
                                <div class="addDocsContentResultShow"></div>
                            </div>
                        </div>
                </div>
                <div class="addDocsContentItem">
                        <div class="addDocsContentItemLeft"></div>
                        <div class="addDocsContentItemRight">
                            <div class="addDocsContentItemSubmit">更新文档</div>
                        </div>
                    </div>
            </div>
        </div>
    </body>
    <script>
        $(function(){

            initData();

            var d_id = "<%- apiData.apiData.d_id %>"  //文档ID

            function initData(){

                //初始化渲染返回结果信息
                $('.addDocsContentResultShow').html(marked($("#md").val()))
                    $('pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });

            }

            $(".add_params").click(function(){

                var paramsInput = $(".addDocsContentItemParamInput:eq(0)").clone(true);
                paramsInput.find("input").val("");
                $(".addDocsContentItemParam").append(paramsInput);
                
            });

            $(".delete_params").click(function(){

                var paramsInput = $(".addDocsContentItemParamInput:eq(0)").clone(true);
                paramsInput.find("input").val("");
                $(".addDocsContentItemParam").children().remove();
                $(".addDocsContentItemParam").append(paramsInput);

            });

            $(".delete_params_item").click(function(){

                if($(".addDocsContentItemParamInput").length > 1){
                    $(this).parent().remove();
                }
                
            })

            $("#md").on("keyup blur",function () {

                $('.addDocsContentResultShow').html(marked($("#md").val()))
                $('pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            });

            //提交更新操作
            $(".addDocsContentItemSubmit").click(function(){

                var d_dcid = $("#d_dcid").val();
                var d_name = $("#d_name").val();
                var d_api = $("#d_api").val();
                var d_note = $("#d_note").val();
                var d_desc = $("#d_desc").val();
                // var d_method = $("input[name='d_method']").val();
                var d_method = $("[name='d_method']:checked").val();
                var d_result = $("#md").val();
                console.log('*********')
                console.log(d_method)
                //获取请求参数信息
                var d_params = [];
                $(".addDocsContentItemParamInput").each(function(index){

                    var inputValue = $(this).find("input").val();

                    if(inputValue.length > 0){

                        //分割
                        var paramValue = inputValue.split("|");
                  
                        if(paramValue.length != 5){
                            POP.warning("第" + (index+1) + "请求参数格式不正确")
                            return;
                        }

                        var tempParam = {
                            drp_name    : paramValue[0].replace(/(^\s*)|(\s*$)/g, ""),
                            drp_way     : paramValue[1].replace(/(^\s*)|(\s*$)/g, ""),
                            drp_is_must : paramValue[2].replace(/(^\s*)|(\s*$)/g, ""),
                            drp_rule    : paramValue[3].replace(/(^\s*)|(\s*$)/g, ""),
                            drp_note    : paramValue[4].replace(/(^\s*)|(\s*$)/g, "")
                        }

                        d_params.push(tempParam);
                    }

                });

                //参数验证
                if(d_dcid == 0){
                    POP.warning("所属分类不能为空")
                    return;
                }

                if(d_api.length <= 0){
                    POP.warning("接口地址不能为空")
                    return;
                }

                if(d_name.length <= 0){
                    POP.warning("接口名称不能为空")
                    return;
                }

                if(d_note.length <= 0){
                    POP.warning("接口备注不能为空")
                    return;
                }

                if(d_desc.length <= 0){
                    POP.warning("接口描述不能为空")
                    return;
                }

                if(d_result.length <= 0){
                    POP.warning("返回结果文档不能为空")
                    return;
                }

                
                var params = {
                    d_id     : d_id,
                    d_dcid   : d_dcid,
                    d_name   : d_name,
                    d_api    : d_api,
                    d_note   : d_note,
                    d_desc   : d_desc,
                    d_method : d_method,
                    d_result : d_result,
                    d_params : d_params
                }

        
                POP.startLoading();

                HTTP.post("/docs/update", params, (rs) => {

                    POP.endLoading();
                    POP.success("提示信息", "恭喜您，接口更新成功");

                })
                
            });
        })
    </script>
</html>